<script setup>
	import {
		watch,
		ref
	} from "vue";
	import {
		useRouter
	} from 'vue-router';
	const active = ref(0);
	const router = useRouter();
	watch(() => router.currentRoute.value.fullPath, () => {
		// //console.log(router.currentRoute.value.fullPath, '1111')
		switch (router.currentRoute.value.fullPath) {
			case '/homePage':
				active.value = 0;
				break;
			case '/device':
				active.value = 1;
				break;
			case '/scanCode':
				active.value = 2;
				break;
			case '/order':
				active.value = 3;
				break;
			case '/my':
				active.value = 4;
				break;
      case '/scanCode1':
        active.value = 5;
        break;
			default:
				active.value = null;
		}
	})
</script>

<template>
	<van-tabbar v-model="active" active-color="#77c6d0" safe-area-inset-bottom route placeholder>
		<van-tabbar-item replace to="/homePage" icon="home-o">首页</van-tabbar-item>
		<van-tabbar-item replace to="/device" icon="newspaper-o">设备</van-tabbar-item>
<!--		<van-tabbar-item replace to="/scanCode" icon="scan">设备注册</van-tabbar-item>-->
		<van-tabbar-item replace to="/scanCode1" icon="scan">设备注册</van-tabbar-item>
		<van-tabbar-item replace to="/order" icon="orders-o">订单</van-tabbar-item>
		<van-tabbar-item replace to="/my" icon="contact">我的</van-tabbar-item>
	</van-tabbar>
</template>

<style>
	.van-tabbar {
		background-color: #FFF !important;
	}
</style>
